<template>
  <div class="meeting-page">
    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="time">10:29</div>
      <span class="dark-mode">🌙</span>
      <div class="status-icons">
        <span class="wifi">📶</span>
        <span class="battery">25%</span>
      </div>
    </div>

    <!-- 顶部导航 -->
    <div class="top-nav">
      <div class="nav-tabs">
        <div class="tab active">见面</div>
        <div class="tab">语聊</div>
        <div class="tab">热门</div>
      </div>
      <div class="nav-actions">
        <div class="action-icon">🏆</div>
        <div class="action-icon">
          ❤️
          <span class="notification-dot"></span>
        </div>
      </div>
    </div>

    <!-- 个人资料网格 -->
    <div class="profile-grid">
      <!-- 第一行 -->
      <div class="profile-card">
        <div class="profile-image">
          <img src="/placeholder.svg?height=400&width=300" alt="Profile" />
          <span class="view-count">34</span>
          <div class="badges">
            <span class="badge location">同城</span>
            <span class="badge status">连麦中</span>
          </div>
        </div>
        <div class="profile-info">
          <div class="profile-name">山西・smile</div>
          <div class="profile-tags">#咨询/顾问,高学历</div>
        </div>
        <div class="profile-avatar">
          <img src="/placeholder.svg?height=40&width=40" alt="Avatar" />
        </div>
      </div>

      <div class="profile-card">
        <div class="profile-image">
          <img src="/placeholder.svg?height=400&width=300" alt="Profile" />
          <span class="view-count">34</span>
          <div class="badges">
            <span class="badge location">同城</span>
          </div>
        </div>
        <div class="profile-info">
          <div class="profile-name">山西・小芳</div>
          <div class="profile-tags">#讲师/助教,高学历</div>
        </div>
        <div class="profile-avatar">
          <img src="/placeholder.svg?height=40&width=40" alt="Avatar" />
        </div>
      </div>

      <!-- 第二行 -->
      <div class="profile-card special">
        <div class="star-badge">
          ⭐ 今日之星
        </div>
        <div class="profile-image gradient">
          <img src="/placeholder.svg?height=400&width=300" alt="Profile" />
          <span class="view-count">50</span>
          <div class="protection-count">
            <span class="protection-icon">🛡️</span>
            11
          </div>
        </div>
        <div class="profile-info">
          <div class="profile-name">中国・不乖不相</div>
          <div class="profile-tags">#不相</div>
        </div>
        <div class="profile-avatar">
          <img src="/placeholder.svg?height=40&width=40" alt="Avatar" />
        </div>
      </div>

      <div class="profile-card">
        <div class="profile-image">
          <img src="/placeholder.svg?height=400&width=300" alt="Profile" />
          <span class="view-count">29</span>
          <div class="badges">
            <span class="badge location">同城</span>
          </div>
        </div>
        <div class="profile-info">
          <div class="profile-name">山西・风一样的女子</div>
          <div class="profile-tags">#服务业,学历匹配,已购房</div>
        </div>
        <div class="profile-avatar">
          <img src="/placeholder.svg?height=40&width=40" alt="Avatar" />
        </div>
      </div>

      <!-- 第三行 -->
      <div class="profile-card">
        <div class="profile-image">
          <img src="/placeholder.svg?height=400&width=300" alt="Profile" />
          <span class="view-count">56</span>
        </div>
        <div class="profile-info">
          <div class="profile-name">山西・阳光女孩</div>
          <div class="profile-tags">#时尚,爱生活</div>
        </div>
        <div class="profile-avatar">
          <img src="/placeholder.svg?height=40&width=40" alt="Avatar" />
        </div>
      </div>

      <div class="profile-card">
        <div class="profile-image">
          <img src="/placeholder.svg?height=400&width=300" alt="Profile" />
          <span class="view-count">55</span>
          <div class="live-badge">
            <span class="live-icon">▶️</span>
            立即开播
          </div>
        </div>
        <div class="profile-info">
          <div class="profile-name">山西・甜心</div>
          <div class="profile-tags">#直播达人</div>
        </div>
        <div class="profile-avatar">
          <img src="/placeholder.svg?height=40&width=40" alt="Avatar" />
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <FooterBar 
      :nav-items="customNavItems"
      :unread-count="27"
      :has-new-notification="true"
    />
  </div>
</template>
<script setup>
  import { ref } from 'vue'

import FooterBar from '@/components/footerBar/FooterBar.vue';

const customNavItems = ref([
  { 
    path: '/recommend', 
    name: '推荐', 
    icon: '🔍',
    badgeType: null 
  },
  { 
    path: '/meet', 
    name: '见面', 
    icon: '👥',
    forceHighlight: true // 强制高亮当前页
  },]);

</script>

<style scoped>
.meeting-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 414px;
  margin: 0 auto;
  min-height: 100vh;
  background: linear-gradient(to bottom right, #e9d5ff, #fff1f2);
  position: relative;
  padding-bottom: 60px;
}

/* 状态栏样式 */
.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  color: #000;
  font-weight: bold;
}

.status-icons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.battery {
  background-color: #ffeb3b;
  padding: 2px 4px;
  border-radius: 10px;
  font-size: 12px;
}

/* 顶部导航样式 */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  margin-bottom: 10px;
}

.nav-tabs {
  display: flex;
  gap: 24px;
}

.tab {
  font-size: 16px;
  color: #666;
  position: relative;
  padding-bottom: 4px;
}

.tab.active {
  color: #000;
  font-weight: bold;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #6366f1;
  border-radius: 3px;
}

.nav-actions {
  display: flex;
  gap: 16px;
}

.action-icon {
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.notification-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f87171;
}

/* 个人资料网格样式 */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 12px;
}

.profile-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.profile-image {
  position: relative;
  height: 200px;
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.view-count {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 12px;
}

.badges {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  gap: 6px;
}

.badge {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.badge.status {
  color: #f87171;
}

.profile-info {
  padding: 10px;
}

.profile-name {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 4px;
}

.profile-tags {
  color: #666;
  font-size: 12px;
}

.profile-avatar {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 特殊卡片样式 */
.profile-card.special .profile-image {
  background: linear-gradient(45deg, #ff85c0, #b388ff);
}

.star-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  color: #f59e0b;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 1;
}

.protection-count {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #f87171;
}

.live-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #6366f1;
}


</style>